<!-- 依赖注入  父子组件传参 -->
<template>
    <div>
        <h1>Provide3.vue(孙)</h1>
        <button @click="change">改颜色</button>
        <div class="box">
        </div>
        <hr>
    </div>
</template>

<script setup lang='ts'>
import { ref, Ref, inject } from 'vue'
//            接收      断言       参数名     默认值
const color = inject<Ref<string>>('color',ref('red'))
const change = ()=>{
    // 非空断言
    color!.value = 'chartreuse'
}
</script>

<style scoped lang="scss">
.box {
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
    background: v-bind(color);
}
</style>